/** IT资源运行部件 
 * Author:      yangjq 
 * CreateTime:  2023/8/12 16:14:18 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 20:30:18 
 * Description: 
*/ 
<template>
  <div ref="echarsRef" :style="{width:props.width , height:props.height}" ></div>
</template>
<script setup lang="ts">
import { ref  , Ref , reactive , watchEffect} from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';

const props = defineProps(['width' , 'height']);

const echarsRef = ref<HTMLDivElement | null>(null);

const { setOptions, echarts, chartInstance} = useECharts(echarsRef as Ref<HTMLDivElement>,'dark');
const dataList = [
  { 
    value : 23,
    itemStyle:
    {
      opacity: 0.8,
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: '#A0CDF6' },
        { offset: 0.5, color: '#5470c6' },
        { offset: 1, color: '#5470c6' }
      ])
    }
  },
  { 
    value : 52,
    itemStyle:
    {
      opacity: 0.8,
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: '#E3F6DB' },
        { offset: 0.5, color: '#91cc75' },
        { offset: 1, color: '#91cc75' }
      ])
    }
  },
  { 
    value : 32,
    itemStyle:
    {
      opacity: 0.8,
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: '#F8DEA5' },
        { offset: 0.5, color: '#fac858' },
        { offset: 1, color: '#fac858' }
      ])
    }
  },
  { 
    value : 89,
    itemStyle:
    {
      opacity: 0.8,
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: '#FBADAD' },
        { offset: 0.5, color: '#ee6666' },
        { offset: 1, color: '#ee6666' }
      ])
    }
  },
  { 
    value : 98,
    itemStyle:
    {
      opacity: 0.8,
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: '#83bff6' },
        { offset: 0.5, color: '#188df0' },
        { offset: 1, color: '#188df0' }
      ])
  }
  },
  
]
const option = reactive({
  title:{
    text:"资源运行",
    textVerticalAlign:'top',
    left:'center',
    top: 16,
    textStyle:{
      color:'#fff',
      textBorderWidth:'1',
      width:'100%',
      fontWeight:'400'
    }
  },
  backgroundColor:'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
  animationEasing: 'elasticOut',
  animationDelayUpdate: function (idx) {
    return idx * 10;
  },
  grid:{
    containLabel:true,
    left:'30px',
    top:'42px',
    right:"30px",
    bottom:'10px',
  },
  yAxis: {
    type: 'category',
    data: [ '机柜', '虚拟机', 'CPU', '内存','存储'],
    splitLine:{show: false},
    splitArea:{
      show: true,
    },    
  },
  xAxis: {
    type: 'value',
    splitLine:{show: false},
    show: false,
    min: 0,
    max: 100,
  },
  series: [
    {
      type: 'bar',
      data: dataList,
      barGap: '20%',
      barCategoryGap: '40%',
      label: {
        show: true,
        position: 'inside',
        color: '#fff',
        fontSize: 12,
        formatter:'{c}%',
      },
      emphasis: {
        focus: 'series',
        blurScope: 'coordinateSystem'
      },
      showBackground: true,
      animationDurationUpdate: 1000, // 更新动画时长为 1s
      animationEasingUpdate: 'quinticInOut', // 更新动画缓动效果为 'quinticInOut'
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }
  ]
});

function initCharts() {
  setOptions(option);
}
initCharts();
</script>
<style>
</style>
